/*
 * @Author: Zhangxx 2425792130@qq.com
 * @Date: 2024-07-01 14:52:18
 * @LastEditors: restart 2425792130@qq.com
 * @LastEditTime: 2024-07-24 11:28:12
 * @FilePath: \geek-pc\src\pages\article\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Link,useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { Card, Breadcrumb, Form, Button,Popconfirm, Radio, DatePicker, Select,Table, Tag, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
// import 'moment/locale/zh-cn'
// import locale from 'antd/es/date-picker/locale/zh_CN'
import img404 from '../../assets/error.png'
import './index.scss'
import {http} from '../../utils'

const { Option } = Select
const { RangePicker } = DatePicker

const Article = () => {
  // 获取频道列表
const [channels, setChannels] = useState([])
useEffect(() => {
    async function fetchChannels() {
      const res = await http.get('/channels')
      setChannels(res.data.channels)
    }
    fetchChannels()
}, [])
// 删除回调
const delArticle = async(data) => {
  await http.delete(`/mp/articles/${data.id}`)
    // 更新列表
    setParams({
      page: 1,
      per_page: 10
    })
}
// 编辑
const navigate = useNavigate()
const goPublish = (data) => {
  navigate(`/publish?id=${data.id}`)

}
const columns = [
  {
    title: '封面',
    dataIndex: 'cover',
    width:120,
    render: cover => {
      return <img src={cover.images || img404} width={80} height={60} alt="" />
    }
  },
  {
    title: '标题',
    dataIndex: 'title',
    width: 220
  },
  {
    title: '状态',
    dataIndex: 'status',
    render: data => <Tag color="green">审核通过</Tag>
  },
  {
    title: '发布时间',
    dataIndex: 'pubdate'
  },
  {
    title: '阅读数',
    dataIndex: 'read_count'
  },
  {
    title: '评论数',
    dataIndex: 'comment_count'
  },
  {
    title: '点赞数',
    dataIndex: 'like_count'
  },
  {
    title: '操作',
    render: data => {
      return (
        <Space size="middle">
          <Button type="primary" shape="circle" onClick={() => goPublish(data)} icon={<EditOutlined />} />
          <Popconfirm
           title="确认删除该条文章吗?"
           onConfirm={() => delArticle(data)}
           okText="确认"
           cancelText="取消">
          <Button
            type="primary"
            danger
            shape="circle"
            icon={<DeleteOutlined />}
          />
          </Popconfirm>
          
        </Space>
      )
    }
  }
]
// 文章列表数据管理
const [article, setArticleList] = useState({
  list: [],
  count: 0
})

// 参数管理
const [params, setParams] = useState({
  page: 1,
  per_page: 10
})
// 发送接口请求
useEffect(() => {
  async function fetchArticleList() {
    const res = await http.get('/mp/articles', { params })
    const { results, total_count } = res.data
    setArticleList({
      list: results,
      count: total_count
    })
  }
  fetchArticleList()
}, [params])   // 当params发生改变之后就会重新执行
// 筛选功能
const onFinish = (values) =>{
  console.log(values,'values')
  const { status, channel_id, date } = values
    // 格式化表单数据
    const _params = {}
    // 格式化status
    _params.status = status
    if (channel_id) {
      _params.channel_id = channel_id
    }
    if (date) {
      _params.begin_pubdate = date[0].format('YYYY-MM-DD')
      _params.end_pubdate = date[1].format('YYYY-MM-DD')
    }
    // 修改params参数 触发接口再次发起
    setParams({
       ...params,
       ..._params
    })
}
const pageChange = (page) => {
  // 拿到当前页参数 修改params 引起接口更新
  setParams({
    ...params,
    page
  })
}
  return (
    <div>
      <Card
        title={
          <Breadcrumb separator=">">
            <Breadcrumb.Item>
              <Link to="/">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>内容管理</Breadcrumb.Item>
          </Breadcrumb>
        }
        style={{ marginBottom: 20 }}
      >
        <Form initialValues={{ status: null }} onFinish={ onFinish }>
          <Form.Item label="状态" name="status">
            <Radio.Group>
              <Radio value={null}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
              <Radio value={3}>审核失败</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item label="频道" name="channel_id">
            <Select
              placeholder="请选择文章频道"
              defaultValue="lucy"
              style={{ width: 120 }}
            >
              {/* <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option> */}
              {channels.map(item => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item label="日期" name="date">
            {/* 传入locale属性 控制中文显示*/}
            <RangePicker></RangePicker>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" style={{ marginLeft: 80 }}>
              筛选
            </Button>
          </Form.Item>
        </Form>
      </Card>
      {/* 列表区域 */}
      <Card title={`根据筛选条件共查询到 ${article.count} 条结果：`}>
      <Table dataSource={article.list} columns={columns} pagination={{
        position: ['bottomCenter'],
        current: params.page,
        pageSize: params.per_page,
        total:article.count,
        onChange: pageChange
      }} bordered />
      </Card>
    </div>
  )
}

export default Article